<template>
	<div>
		<my-form :model="formData" :formItem="formItem" label-width="90px" ref="formRef">
			<template #executionListener>
				<el-badge :value="executionListenerLength">
					<el-button @click="dialogExecutionListener = true">编辑</el-button>
				</el-badge>
			</template>
		</my-form>
		<executionListenerDialog v-model="dialogExecutionListener" :element="element" :modeler="modeler" @close="finishExecutionListener" />
	</div>
</template>

<script setup>
import executionListenerDialog from './property/executionListener';
import hooksPanel, { PanelProps } from '../common/Panel';
import { commonParse, conditionExpressionParse } from '../common/parseElement';
import { StrUtil } from '@/utils/StrUtil';
import { useVModel } from '@vueuse/core';

let formRef = ref(null);

const props = defineProps({
		...PanelProps
	}),
	formItem = [
		{
			prop: 'id',
			label: '节点 id',
			required: true
		},
		{
			prop: 'name',
			label: '节点名称'
		},
		{
			prop: 'documentation',
			label: '节点描述'
		},
		{
			prop: 'executionListener',
			label: '执行监听器'
		},
		{
			prop: 'conditionExpression',
			label: '跳转条件'
		},
		{
			prop: 'skipExpression',
			label: '跳过表达式'
		}
	];

const { formData, dialogExecutionListener, executionListenerLength, updateProperties, finishExecutionListener, computedExecutionListenerLength } =
	hooksPanel(props);

formData.value = conditionExpressionParse(commonParse(props.element));
computedExecutionListenerLength();

watch(
	() => formData.value.conditionExpression,
	(val) => {
		if (StrUtil.isNotBlank(val)) {
			const newCondition = props.modeler.get('moddle').create('bpmn:FormalExpression', { body: val });
			updateProperties({ conditionExpression: newCondition });
		}
	}
);

watch(
	() => formData.value.skipExpression,
	(val) => {
		if (StrUtil.isNotBlank(val)) {
			updateProperties({ 'flowable:skipExpression': val });
		} else {
			delete props.element.businessObject.$attrs[`flowable:skipExpression`];
		}
	}
);

defineExpose({
	childValidate: async () => {
		return await formRef.value?.$refs?.refMyForm?.validate();
	}
});
</script>
